<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth.js'
import { useRoute, useRouter } from 'vue-router';
import { getUserDetailAPI, editUserInfo } from '@/apis/user.js'; 
import { ElMessage } from 'element-plus';

const useStore = useAuthStore();
const route = useRoute();
const router = useRouter();

/* 编辑资料对话框 */ 
const dialogVisible  = ref(false);

// 定义表单初始模板
const initialForm = {
  username: '',
  phone: '',
  email: '',
  address: '',
};

const userInfo = ref({
  username: '',
  phone: '',
  email: '',
  address: '',
});

// 初始化表单
const dialogForm = ref({...initialForm});

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await getUserDetailAPI();
    userInfo.value = res.data; // 后端返回的用户信息赋值
  } catch (err) {
    console.error('获取用户信息失败：', err);
    ElMessage.error('获取个人资料失败，请重试');
  }
};

// 打开对话框
const openDialog = () => {
  dialogVisible.value = true;
  dialogForm.value = {
    username: userInfo.value.username || '',
    phone: userInfo.value.phone || '',
    email: userInfo.value.email || '',
    address: userInfo.value.address || '',
  };
};
// 关闭对话框并重置表单
const closeDialog = () => {
  dialogVisible.value = false;
  Object.assign(dialogForm.value, initialForm);
};

/* 退出登录 */
const handlerLogout = () => {
    useStore.logout();
    router.push('/user/login');
}

// 编辑个人信息
const editPresonInfo = async () => {
    const res = await editUserInfo(dialogForm.value);
    userInfo.value = res.data;
    ElMessage.success('资料修改成功'); 
    closeDialog();
}

onMounted(() => {
  getUserInfo();
});
</script>
<template>
    <div class="container">
        <div class="form">
            <!-- 头像 -->
            <div class="avatar">
                <img src="/avatar.jpg" alt="" width="100%" height="100%" style="border-radius: 50%;">
            </div>

            <!-- 用户名 -->
            <div class="text">
                <span>{{ userInfo.username }}</span>
            </div>

            <!-- 分割线 -->
            <div class="divider"></div>

            <!-- 信息列表区域 -->
            <div class="info-list">
                <div class="info-item">
                    <div class="info-label">
                        <span>手机号</span>
                    </div>
                    <span class="info-value">{{ userInfo.phone || '暂未绑定' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">邮箱</span>
                    <span class="info-value">{{ userInfo.email || '暂未绑定' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">地址</span>
                    <span class="info-value">{{ userInfo.address || '暂未绑定' }}</span>
                </div>
            </div>

            <!-- 按钮 -->
             <div class="button-group">
                <el-button class="edit-btn" @click="openDialog">
                    <img src="/icon/write.png" alt="自定义图标" class="btn-icon"/>
                    <span>编辑资料</span>
                </el-button>
                <el-button class="logout-btn" @click="handlerLogout">
                    <img src="/icon/arrow-left.png" alt="自定义图标" class="btn-icon"/>
                    <span>退出账号</span>
                </el-button>
             </div>
        </div>

        <!-- 编辑资料对话框 -->
         <!-- 遮罩层 -->
        <div 
            class="dialog-mask" 
            v-show="dialogVisible" 
        >
            <!-- 对话框内容 -->
            <div class="dialog-content">
                <!-- 对话框头部 -->
                <div class="dialog-header">
                    <span class="dialog-title">编辑资料</span>
                    <button class="close-btn" @click="closeDialog">
                        <img src="/icon/x.png" alt="关闭图标" width="20px" height="20px">
                    </button>
                </div>
                <!-- 对话框主体 -->
                <div class="dialog-body">
                     <!-- 账号输入框 -->
                    <div class="input-box">
                        <div class="input-label">
                            <span>姓名</span>
                        </div>
                        <div class="input-container">
                            <el-input v-model="dialogForm.username" placeholder="请输入用户名" class="input-inner" />
                        </div>
                    </div>
                    <!-- 手机号输入框 -->
                    <div class="input-box">
                        <div class="input-label">
                            <span>手机号</span>
                        </div>
                        <div class="input-container">
                            <el-input v-model="dialogForm.phone" placeholder="请输入手机号" class="input-inner" />
                        </div>
                    </div>
                    <!-- 邮箱输入框 -->
                    <div class="input-box">
                        <div class="input-label">
                            <span>邮箱</span>
                        </div>
                        <div class="input-container">
                            <el-input v-model="dialogForm.email" placeholder="请输入邮箱" class="input-inner" />
                        </div>
                    </div>
                    <!-- 地址输入框 -->
                    <div class="input-box">
                        <div class="input-label">
                            <span>地址</span>
                        </div>
                        <div class="input-container">
                            <el-input v-model="dialogForm.address" placeholder="请输入地址" class="input-inner" />
                        </div>
                    </div>
                </div>

                <!-- 分割线 -->
                <div class="divider" style="width: 100%;"></div>
                <!-- 对话框底部 -->
                <div class="dialog-footer">
                    <el-button class="logout-btn" style="color: #8D8C8C;" @click="closeDialog">
                        <span>取消</span>
                    </el-button>
                    <el-button class="edit-btn" @click="editPresonInfo">
                        <span>保存</span>
                    </el-button>
                </div>
            </div>
        </div>

    </div>
    
</template>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.form {
    width: 462px;
    height: 588px;
}
.avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;
}
.text {
    margin-top: 20px;
    text-align: center;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    color: #2B2B2B;
}

/* 分割线样式 */
.divider {
    width: 80%; 
    height: 1px; 
    background-color: #e5e5e5;
    margin: 0 auto;
    margin-top: 64px; 
}

/* 信息列表样式 */
.info-item {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: #FAFAFA;
    margin: 20px 0;
}
.info-item .info-label {
    width: 72px;
    height: 22px;
    color: #787980;
    padding-left: 16px;
}
.unbind-text {
  color: #AAB1BA !important; 
  font-size: 14px !important; 
}

/* 按钮组样式 */
.button-group {
    height: 62px;
    display: flex;
    justify-content: space-between;
}
.button-group .el-button{
    height: 100%;
    width: 217px;
    font-size: 16px;
    border: 0;
}
.button-group img {
    margin-right: 10px;
}
.edit-btn {
    background-color: #4077FB;
    color: #fff;
}
.logout-btn {
    background-color: #F2F3F4;
    color: #454545;
}

/* 编辑资料对话框样式 */
/* 遮罩层 */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.dialog-content {
    width: 420px;
    height: 467px;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 24px;
    font-size: 18px;
}
.close-btn {
    background-color: transparent;
    border: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.dialog-body {
    width: 372px;
    height: 228px;
    margin: 0 auto;
    margin-top: 10px;
    /* border: 1px solid red; */
}
.input-box {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 42px;
    margin-bottom: 20px;
}
.input-label {
    width: 60px;
    height: 22px;
    font-size: 16px;
    color: #787980;
}
.input-container {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid transparent;
}
.input-inner {
    margin-left: 10px;
}
.dialog-footer {
    width: 372px;
    height: 45px;
    margin-top: 24px;
    margin-left: 24px;
}
.dialog-footer .el-button {
    width: 180px;
    height: 100%;
}

/* 输入框聚焦样式 */
.input-box.focused {
  border: 1px solid #4077FB;
}

/* 输入框占位符颜色 */
:deep(.input-inner .el-input__inner)::placeholder {
  color: #AAB1BA;
}

/* 清除Element输入框默认样式 */
:deep(.input-inner .el-input__wrapper) {
  box-shadow: none;
  background: transparent;
  padding: 0;
}
:deep(.input-inner .el-input__suffix) {
  display: none;
}
:deep(.input-inner .el-input__inner) {
  border: none;
  padding: 0;
  background: transparent;
  height: 100%;
  color: #101014 !important; /* 关键：设置输入框文字为黑色 */
}
/* 解决按钮 hover 变色：覆盖 edit-btn 的 hover 样式 */
:deep(.edit-btn:hover) {
  background-color: #4077FB !important; /* 与默认背景色一致 */
  color: #fff !important;               /* 与默认文字色一致 */
  border: 0 !important;                 /* 保持无边框 */
}

/* 解决按钮 hover 变色：覆盖 logout-btn 的 hover 样式 */
:deep(.logout-btn:hover) {
  background-color: #F2F3F4 !important; /* 与默认背景色一致 */
  color: #454545 !important;            /* 与默认文字色一致 */
  border: 0 !important;                 /* 保持无边框 */
}
</style>